<template>
  <div class="table">
    <!-- tabs -->
    <div class="mt-10 mb-10">
      <Tabs :tabs="tabs" :currentKey="currentKey" :isShowNum="false" @tab-click="changeTab" />
    </div>
    <PageTable :loading="loading" :columns="columns" :data="dataSource" />
    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'HelpTable',
  components: {},
  props: {
    equType: {
      type: String,
      default: 'web'
    },
    platform: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      loading: true,
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '标题',
          prop: 'title'
        },
        {
          label: '是否推荐',
          render: (h, { row }) => {
            return <span>{row.isRecommend ? '是' : '否'}</span>
          }
        },
        {
          label: '是否显示',
          render: (h, { row }) => {
            return <span>{row.isHidden ? '否' : '是'}</span>
          }
        },
        {
          label: '排序',
          prop: 'sort'
        },
        {
          label: '添加时间',
          prop: 'createdTime'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                {row.isHidden ? (
                  <span>
                    <el-button
                      type="text"
                      onClick={() => this.updateStatus({ state: row.isHidden, id: row.id })}
                    >
                      显示
                    </el-button>
                    <el-button type="text" onClick={() => this.delete(row.id)}>
                      删除
                    </el-button>
                  </span>
                ) : (
                  <el-button
                    type="text"
                    onClick={() => this.updateStatus({ state: row.isHidden, id: row.id })}
                  >
                    隐藏
                  </el-button>
                )}
                <el-button type="text" class="ml-10" onClick={() => this.update(row)}>
                  编辑
                </el-button>
              </div>
            )
          }
        }
      ],
      dataSource: [],
      // 当前激活tab
      currentKey: '',
      // tab列表
      tabs: []
    }
  },
  computed: {},
  watch: {},
  async created() {
    await this.getTabCodeList()
    this.getList()
  },
  mounted() {},
  methods: {
    ...mapActions('help', ['getSelectSection']),
    // 获取问题列表
    async getList() {
      const params = {
        clientSource: this.platform,
        tabCode: this.currentKey,
        ...this.listQuery
      }
      // 发送请求
      try {
        const {
          data: { records, total }
        } = await this.$http.system.help.getList({ params })
        this.dataSource = records
        this.total = total
        this.loading = false
      } catch (error) {
        console.log('getList', error)
      }
    },
    // 获取栏目列表
    async getTabCodeList() {
      try {
        const res = await this.getSelectSection({ clientSource: this.platform })
        this.currentKey = res[0].tabList[0].tabCode
        this.tabs = res[0].tabList.map(el => {
          return { ...el, label: el.tabName, key: el.tabCode }
        })
      } catch (error) {
        console.log('getTabCodeList', error)
      }
    },

    // 切换tab
    changeTab({ key }) {
      this.currentKey = key
      this.listQuery.pageNo = 1
      this.getList()
    },

    // 删除
    async delete(id) {
      this.$handleConfirm({ message: '确认删除吗？' }).then(async () => {
        const { status } = await this.$http.system.help.delete(id)
        if (status === 200) {
          this.$message.success('已删除！')
          if (this.dataSource.length == 1 && this.listQuery.pageNo > 1) {
            this.listQuery.pageNo--
          }
          this.getList()
        }
      })
    },
    // 更新启用状态
    async updateStatus({ state, id }) {
      // return
      try {
        const { status } = await this.$http.system.help.updateStatus({
          hiddenStatus: !state,
          id
        })
        if (status === 200) {
          this.$message.success(state ? '已显示' : '已隐藏')
          this.getList()
        }
      } catch (error) {
        console.log('updateStatus', error)
      }
    },
    // 编辑
    update({ id }) {
      this.$router.push({
        path: '/setting/help_center/edit_content',
        query: { type: 'update', id, platform: this.platform }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
